<template>
  <div v-if="payIndex === 0">
    <!-- 销售数据模块 -->
    <div class="bosom">
      <div class="row">
        <div class="vendition">销售数据</div>
        <view class="align-flex">
          <poput-time :list='insuranceData' :default="insuranceIndex" @cancel="bindPickerChangeInsurance" />
        </view>
      </div>
      <div class="box-list align-flex">
        <div class="block-box-i">
          <div class="title">充值金额</div>
          <div class="num">¥{{ saleData.rechargeAmount }}</div>
        </div>
        <div class="block-box-i block-box-i-left">
          <div class="title">充值份数</div>
          <div class="num">{{ saleData.rechargeCopies }}</div>
        </div>
      </div>
    </div>
    <!-- 运营数据模块 -->
    <div class="bosom">
      <div class="row">
        <div class="vendition">运营数据</div>
        <view class="align-flex">
          <poput-time :list='operateData' :default="operateIndex" @cancel="bindPickerChangeOperate" noCustom="true" />
        </view>
      </div>
      <div class="block-box-i block-box-i-active">
        <div class="title">开通客户</div>
        <div class="num">{{ eleoperateData?.openCustomer }}</div>
      </div>
      <div class="box-list align-flex">
        <div class="block-box-i">
          <div class="title">签署份数</div>
          <div class="num">{{ eleoperateData?.sign }}</div>
        </div>
        <div class="block-box-i block-box-i-left">
          <div class="title">待签署份数</div>
          <div class="num">{{ eleoperateData?.notSign }}</div>
        </div>
      </div>
      <div class="box-list align-flex">
        <div class="block-box-i">
          <div class="title">签署失败份数</div>
          <div class="num">{{ eleoperateData?.signingFailed }}</div>
        </div>
        <div class="block-box-i block-box-i-left">
          <div class="title">剩余份数</div>
          <div class="num">{{ eleoperateData?.surplus }}</div>
        </div>
      </div>
    </div>
    <!-- 近7日销售趋势图表模块 -->
    <div class="bosom">
      <div class="row">
        <div class="vendition">近7日充值趋势</div>
        <div class="jamb align-flex">
          <!--                <div :class="['sum', numMoney == 0? 'amount-active' : '']"  @click="numMoneyChange(0)">按人数</div>-->
          <!--                <div :class="['amount', numMoney == 1? 'amount-active' : '']" @click="numMoneyChange(1)">按金额</div>-->
          <tab-capsule :list="['按人数', '按金额']" :active="timeTab" @change="change"></tab-capsule>
        </div>
      </div>
      <div class="charts-box" v-if="timeTab == 0">
        <qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
      </div>
      <div class="charts-box" v-else>
        <qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" />
      </div>
    </div>
    <!-- 近7日签署趋势 -->
    <div class="bosom">
      <div class="row">
        <div class="vendition">近7日签署趋势</div>
        <div class="jamb align-flex">
          <!--                <div :class="['sum', numMoneyPie == 0? 'amount-active' : '']"  @click="numMoneyChangePie(0)" >签署份数</div>-->
          <!--                <div :class="['middle', numMoneyPie == 1? 'amount-active' : '']"  @click="numMoneyChangePie(1)">待签署</div>-->
          <!--                <div :class="['amount', numMoneyPie == 2? 'amount-active' : '']"  @click="numMoneyChangePie(2)">签署失败</div>-->
          <tab-capsule :list="['签署份数', '待签署', '签署失败']" :active="numMoneyPie" @change="numMoneyChangePie"></tab-capsule>
        </div>
      </div>
      <div class="charts-box" v-if="numMoneyPie == 0">
        <qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" />
      </div>
      <div class="charts-box" v-else-if="numMoneyPie == 1">
        <qiun-data-charts type="column" :opts="opts4" :chartData="chartData4" />
      </div>
      <div class="charts-box" v-else>
        <qiun-data-charts type="column" :opts="opts5" :chartData="chartData5" />
      </div>
    </div>
    <!--  <div>{{payIndex}} &#45;&#45;&#45;&#45; 1111</div>-->
  </div>
</template>

<script lang="ts" setup>
import uchartsOpts from '@/utils/ucharts'
import { ref, defineProps, toRefs } from 'vue'
import { number } from '@intlify/core-base'
import { onLoad } from '@dcloudio/uni-app'
import user from '@/utils/user'
import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import { getEleOperateData, getEleSaleData, getEleSevenRechargeTrend, getEleSevenSignTrend } from '@/api/quick'

const props = defineProps({
  // 子组件接收父组件传递过来的值
  payIndex: Number
})
// 使用父组件传递过来的值
const { payIndex } = toRefs(props)

console.log(payIndex.value, '打印一下这个是啥')
// 销售数据  昨天、明天、本周、本月、自定义
const insuranceIndex = ref(3)
const insuranceData = ref(['昨天', '今天', '本周', '本月', '上月'])
const insuranceThree = ref('')
const insuranceFour = ref('')
const insurance = ref('' as string | undefined)
const timeTab = ref(0)
const bindPickerChangeInsurance = async (index: number, time: undefined | string) => {
  console.log(index, 'operateData')
  //   console.log(e.detail, 'e.detail')
  insuranceIndex.value = index.index
  insurance.value = index.time
  insuranceFour.value = insurance.value.substring(0, 10)
  insuranceThree.value = insurance.value.substring(13, 23)
  startTime.value = index.startTime
  endTime.value = index.endTime
  console.log(insuranceFour.value, '日期格式日期格式')
  console.log(insuranceThree.value, '日期格式日期格式33333')
  await eleSaleData()
}

// 运营数据  昨天、明天、本周、本月、自定义
const itemRange = ref('' as string | undefined)
const operateIndex = ref(4)
const operateData = ref(['全部', '昨天', '今天', '本周', '本月', '上月'])
const itemRangeThree = ref()
const itemRangeFour = ref()
const bindPickerChangeOperate = async (
  index: number,
  time: undefined | string
) => {
  console.log(index, 'operateData')
  //   console.log(e.detail, 'e.detail')
  operateIndex.value = index.index
  itemRange.value = index.time
  itemRangeThree.value = itemRange.value.substring(0, 10)
  itemRangeFour.value = itemRange.value.substring(13, 23)
  startTime.value = index.startTime
  endTime.value = index.endTime
  await eleOperateData()
}

/* ucharts柱状图操作图表 */
const chartData = ref()
const opts = {
  dataLabel: false,
  color: [
    '#1890FF',
    '#91CB74',
    '#FAC858',
    '#EE6666',
    '#73C0DE',
    '#3CA272',
    '#FC8452',
    '#9A60B4',
    '#ea7ccc',
    '#9EAFFA'
  ],
  padding: [15, 15, 0, 5],
  enableMarkLine: false,
  legend: {
    show: false,
    fontColor: 'red'
  },
  xAxis: {
    axisLine: false,
    disabled: false,
    calibration: false,
    fontSize: 10
  },
  yAxis: {
    disableGrid: true,
    splitNumber: 4,
    padding: 30,
    data: [
      {
        min: 0,
        axisLine: false,
        fontSize: 14,
        disabled: false,
        showTitle: false,
        titleFontColor: '9497B1',
        fontColor: '#9497B1'
      }
    ]
  },
  extra: {
    column: {
      type: 'group',
      width: 5,
      activeBgColor: '#FFFFFF',
      activeBgOpacity: 0.08,
      seriesGap: 3,
      labelFontColor: '#9497B1'
      // barBorderRadius: [6, 6, 6, 6]
    },
    markLine: {
      data: [
        {
          value: 21,
          showLabel: true,
          labelBgColor: 'red'
        }
      ]
    },
    tooltip: {
      showBox: true
    }
  }
}

/* ucharts柱状图操作图表 */
const chartData2 = ref()
const opts2 = {
  dataLabel: false,
  color: [
    '#1890FF',
    '#91CB74',
    '#FAC858',
    '#EE6666',
    '#73C0DE',
    '#3CA272',
    '#FC8452',
    '#9A60B4',
    '#ea7ccc',
    '#9EAFFA'
  ],
  padding: [15, 15, 0, 5],
  enableMarkLine: false,
  legend: {
    show: false,
    fontColor: 'red'
  },
  xAxis: {
    axisLine: false,
    disabled: false,
    calibration: false,
    fontSize: 10
  },
  yAxis: {
    disableGrid: true,
    splitNumber: 4,
    padding: 30,
    data: [
      {
        min: 0,
        axisLine: false,
        fontSize: 14,
        disabled: false,
        showTitle: false,
        titleFontColor: '9497B1',
        fontColor: '#9497B1'
      }
    ]
  },
  extra: {
    column: {
      type: 'group',
      width: 5,
      activeBgColor: '#FFFFFF',
      activeBgOpacity: 0.08,
      seriesGap: 3,
      labelFontColor: '#9497B1'
      // barBorderRadius: [6, 6, 6, 6]
    },
    markLine: {
      data: [
        {
          value: 21,
          showLabel: true,
          labelBgColor: 'red'
        }
      ]
    },
    tooltip: {
      showBox: true
    }
  }
}

/* ucharts柱状图操作图表 */
const chartData3 = ref({
  categories: [],
  series: [
    {
      name: '',
      data: [],
      show: true,
      textColor: '#9EAFFA'
    }
  ]
})
const opts3 = {
  dataLabel: false,
  color: [
    '#1890FF',
    '#91CB74',
    '#FAC858',
    '#EE6666',
    '#73C0DE',
    '#3CA272',
    '#FC8452',
    '#9A60B4',
    '#ea7ccc',
    '#9EAFFA'
  ],
  padding: [15, 15, 0, 5],
  enableMarkLine: false,
  legend: {
    show: false,
    fontColor: 'red'
  },
  xAxis: {
    axisLine: false,
    disabled: false,
    calibration: false,
    fontSize: 10
  },
  yAxis: {
    disableGrid: true,
    splitNumber: 4,
    padding: 30,
    data: [
      {
        min: 0,
        axisLine: false,
        fontSize: 14,
        disabled: false,
        showTitle: false,
        titleFontColor: '9497B1',
        fontColor: '#9497B1'
      }
    ]
  },
  extra: {
    column: {
      type: 'group',
      width: 5,
      activeBgColor: '#FFFFFF',
      activeBgOpacity: 0.08,
      seriesGap: 3,
      labelFontColor: '#9497B1'
      // barBorderRadius: [6, 6, 6, 6]
    },
    markLine: {
      data: [
        {
          value: 21,
          showLabel: true,
          labelBgColor: 'red'
        }
      ]
    },
    tooltip: {
      showBox: true
    }
  }
}

/* ucharts柱状图操作图表 */
const chartData4 = ref()
const opts4 = {
  color: [
    '#1890FF',
    '#91CB74',
    '#FAC858',
    '#EE6666',
    '#73C0DE',
    '#3CA272',
    '#FC8452',
    '#9A60B4',
    '#ea7ccc',
    '#9EAFFA'
  ],
  padding: [15, 15, 0, 5],
  enableMarkLine: false,
  legend: {
    show: false,
    fontColor: 'red'
  },
  xAxis: {
    axisLine: false,
    disabled: false,
    calibration: false,
    fontSize: 10
  },
  yAxis: {
    disableGrid: true,
    splitNumber: 4,
    padding: 30,
    data: [
      {
        min: 0,
        axisLine: false,
        fontSize: 14,
        disabled: false,
        showTitle: false,
        titleFontColor: '9497B1',
        fontColor: '#9497B1'
      }
    ]
  },
  extra: {
    column: {
      type: 'group',
      width: 5,
      activeBgColor: '#FFFFFF',
      activeBgOpacity: 0.08,
      seriesGap: 3,
      labelFontColor: '#9497B1'
      // barBorderRadius: [6, 6, 6, 6]
    },
    markLine: {
      data: [
        {
          value: 21,
          showLabel: true,
          labelBgColor: 'red'
        }
      ]
    },
    tooltip: {
      showBox: true
    }
  }
}

/* ucharts柱状图操作图表 */
const chartData5 = ref()
const opts5 = {
  color: [
    '#1890FF',
    '#91CB74',
    '#FAC858',
    '#EE6666',
    '#73C0DE',
    '#3CA272',
    '#FC8452',
    '#9A60B4',
    '#ea7ccc',
    '#9EAFFA'
  ],
  padding: [15, 15, 0, 5],
  enableMarkLine: false,
  legend: {
    show: false,
    fontColor: 'red'
  },
  xAxis: {
    axisLine: false,
    disabled: false,
    calibration: false,
    fontSize: 10
  },
  yAxis: {
    disableGrid: true,
    splitNumber: 4,
    padding: 30,
    data: [
      {
        min: 0,
        axisLine: false,
        fontSize: 14,
        disabled: false,
        showTitle: false,
        titleFontColor: '9497B1',
        fontColor: '#9497B1'
      }
    ]
  },
  extra: {
    column: {
      type: 'group',
      width: 5,
      activeBgColor: '#FFFFFF',
      activeBgOpacity: 0.08,
      seriesGap: 3,
      labelFontColor: '#9497B1'
      // barBorderRadius: [6, 6, 6, 6]
    },
    markLine: {
      data: [
        {
          value: 21,
          showLabel: true,
          labelBgColor: 'red'
        }
      ]
    },
    tooltip: {
      showBox: true
    }
  }
}
onLoad(async () => {
  await user.waitLogin()
  const nowyear = new Date().getFullYear()
  const nowmonth = new Date().getMonth() + 1
  startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
  endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
  await eleSaleData()
  await eleOperateData()
  await eleSevenRechargeTrend()
  await eleSevenSignTrend()
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
// 切换人数和金额事件
const numMoney = ref(0)
const change = async (val: number) => {
  console.log(val, 'val的之')
  timeTab.value = val
}

// 切换笔数和金额事件
const numMoneyPie = ref(0)
const numMoneyChangePie = (val: number) => {
  console.log(val, 'val的之')
  numMoneyPie.value = val
}

// 模拟从服务器获取数据时的延时
// 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
chartData.value = JSON.parse(JSON.stringify({
  categories: [
  ],
  series: [
    {
      name: '',
      data: [],
      show: true,
      textColor: '#9EAFFA'
    }
  ]
}))

// 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
chartData2.value = JSON.parse(JSON.stringify({
  categories: [
  ],
  series: [
    {
      name: '',
      data: [],
      show: true,
      textColor: '#9EAFFA'
    }
  ]
}))

// 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
chartData3.value = JSON.parse(JSON.stringify({
  categories: [],
  series: [
    {
      name: '',
      data: [],
      show: true,
      textColor: '#9EAFFA'
    }
  ]
}))

// 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
chartData4.value = JSON.parse(JSON.stringify({
  categories: [
  ],
  series: [
    {
      name: '',
      data: [],
      show: true,
      textColor: '#9EAFFA'
    }
  ]
}))

// 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
chartData5.value = JSON.parse(JSON.stringify({
  categories: [
  ],
  series: [
    {
      name: '',
      data: [],
      show: true,
      textColor: '#9EAFFA'
    }
  ]
}))
const startTime = ref('')
const endTime = ref('')
const saleData = ref({})
// 销售数据
const eleSaleData = async () => {
  const result = await getEleSaleData({
    startTime: insuranceIndex.value !== 1000 ? startTime.value : insuranceFour.value || '',
    // eslint-disable-next-line eqeqeq
    endTime: insuranceIndex.value !== 1000 ? endTime.value : insuranceThree.value || ''
  })
  saleData.value = result
  console.log(result, '销售数据')
}

// 运营数据
const eleoperateData = ref({})
const eleOperateData = async () => {
  const result = await getEleOperateData({
    startTime: startTime.value,
    endTime: endTime.value
  })
  console.log(result, '运营数据3333')
  eleoperateData.value = result
}
const eleSevenRechargeTrend = async () => {
  const result = await getEleSevenRechargeTrend()
  console.log(result, '近七日充值趋势')
  // eslint-disable-next-line array-callback-return
  chartData.value.categories = result.day.map((item: string, index: number) => {
    console.log(item.split('-')[1] + '/' + item.split('-')[2], 'itemitemitem')
    // index = item.value
    return item.split('-')[1] + '/' + item.split('-')[2]
  })
  chartData!.value.series[0].data = result.people.map((item: string, index: number) => {
    console.log(item, 'moneymoney')
    // index = item.value
    return { value: item, color: '#3E5FF5' }
  })

  chartData2.value.categories = result.day.map((item: string, index: number) => {
    console.log(item.split('-')[1] + '/' + item.split('-')[2], 'itemitemitem')
    // index = item.value
    return item.split('-')[1] + '/' + item.split('-')[2]
  })

  chartData2.value.series[0].data = result.money.map((item: string, index: number) => {
    console.log(item, 'moneymoney')
    // index = item.value
    return { value: item, color: '#3E5FF5' }
  })
}

const eleSevenSignTrend = async () => {
  const result = await getEleSevenSignTrend()
  // eslint-disable-next-line array-callback-return
  chartData3.value.categories = result.day.map((item: string, index: number) => {
    console.log(item.split('-')[1] + '/' + item.split('-')[2], 'itemitemitem')
    // index = item.value
    return item.split('-')[1] + '/' + item.split('-')[2]
  })
  chartData3.value.series[0].data = result.signQuantity.map((item: string, index: number) => {
    console.log(item, 'moneymoney')
    // index = item.value
    return { value: item, color: '#3E5FF5' }
  })

  chartData4.value.categories = result.day.map((item: string, index: number) => {
    console.log(item.split('-')[1] + '/' + item.split('-')[2], 'itemitemitem')
    // index = item.value
    return item.split('-')[1] + '/' + item.split('-')[2]
  })

  chartData4.value.series[0].data = result.toBeSigned.map((item: string, index: number) => {
    console.log(item, 'moneymoney')
    // index = item.value
    return { value: item, color: '#3E5FF5' }
  })

  chartData5.value.categories = result.day.map((item: string, index: number) => {
    console.log(item.split('-')[1] + '/' + item.split('-')[2], 'itemitemitem')
    // index = item.value
    return item.split('-')[1] + '/' + item.split('-')[2]
  })

  chartData5.value.series[0].data = result.signingFailed.map((item: string, index: number) => {
    console.log(item, 'moneymoney')
    // index = item.value
    return { value: item, color: '#3E5FF5' }
  })
  console.log(result, '近七日签署趋势')
}
</script>

<style lang="scss" scoped>
.bosom .jamb .amount {
  background: #FFFFFF;
  color: black;
}

.bosom .jamb .middle {
  border-radius: 0;
  background: #FFFFFF;
  color: black;
  padding: 12rpx 25rpx;
  border: 1px solid #ebeffe;
}

.bosom .jamb .amount-active {
  background: #EBEFFE;
  color: #3E5FF5;
}

.bosom .jamb .sum {
  border-radius: 12rpx 0 0 12rpx;
}

.bosom .jamb .amount {
  border-radius: 0 12rpx 12rpx 0;
}
</style>
